<template>
	<view>
		<view v-if="tabs.length!=0" class="content">

			<wybTabs :current="current" :tabs="tabs" @change="tab()" :scroll="false"></wybTabs>
			<swiper :duration="500" :style="'height: '+clientHeight+'px;'" :current="thisindex" :data-index='thisindex' @change="toggle"
			 circular>
				<swiper-item class="swiper-item" v-for="(item,index) in tabs" :key="item.id">
					<seckillList :aid="item.id" @countHigh="countHigh"></seckillList>

				</swiper-item>
			</swiper>

		</view>
		<view v-else>
			<u-empty text="暂无活动" mode="data" margin-top="100"></u-empty>
		</view>

		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>

		<failTimeout v-show="failTimeout" :tabbar="true"></failTimeout>
	</view>
</template>

<script>
	import wybTabs from '../../components/wyb-tabs/wyb-tabs.vue'
	import seckillList from '../../components/seckillList.vue'
	import SmsFlashPromotionController from '../../api/SmsFlashPromotionController.js'
	export default {
		components: {
			wybTabs,
			seckillList
		},

		data() {
			return {
				failTimeout: false,
				thisindex: 0,
				current: 0,
				tabs: [],
				tabsData: null,
				clientHeight: null,
			}
		},
		async onLoad() {

			let data = [];
			await SmsFlashPromotionController.list().then(res => {
				if (res.data.code == 200) {
					res.data.data.forEach(e => {
						data.push({
							id: e.id,
							label: e.title,
							activeColor: '#FF0000', // 被选中时的颜色，可覆盖在HTML标签中传入的颜色，非必有属性
							sBlockColor: '#FF0000' // 滑块颜色，可覆盖在HTML标签中传入的颜色，非必有属性
						})
					})
				}
			}).catch(err => {
				if (err.errMsg == 'request:fail timeout') {
					this.failTimeout = true
				}
			})
			this.tabs = data
			
		},
		onShow() {
			this.failTimeout = false
			
		},
		methods: {
			// 切换触发的事件
			toggle(e) {
				this.current = e.detail.current
			},
			tab(e) {
				this.thisindex = e.index
			},
			countHigh(h){
				this.clientHeight=h
			}
		}
	}
</script>

<style scoped>
	::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		} 
	.nuter {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
	}

	.nuter view {
		flex: 1;
		font-size: 30rpx;
		text-align: center;
		transition: all 0.5s ease .1s;
		background-color: #f0f0f0;
	}

	.active {
		box-sizing: border-box;
		color: #007AFF;

	}

	swiper {
		height: 100%;
		width: 100%;
		overflow: hidden;
		text-align: center;
		/* background-color: red; */
	}

	.swiper-item {
		overflow-y: scroll;
		width: 99.5%;
		height: 99%;
		/* background-color: white; */
		/* height: 99%; */
		box-sizing: border-box;
		padding: 1rpx;
	}
</style>
